<template>
  <text class="head"> {{ passStep == 1 ? "用户名/手机号登录" : "忘记密码" }}</text>
  <view class="user_login">
    <form class="form_view" @submit="onSubmit">
      <template v-if="passStep == 1">
        <view class="input_box">
          <input
            class="input"
            type="text"
            v-model="formData[1].username"
            placeholder="请输入用户账号或手机号"
          />
          <DeleteIcon
            v-show="formData[passStep].username"
            @click="formData[passStep].username = ''"
          ></DeleteIcon>
        </view>
        <view class="input_box">
          <input
            class="input"
            type="password"
            v-model="formData[passStep].password"
            placeholder="请输入密码"
          />
          <!-- <text @click="passStep = 2" class="forget">忘记密码</text> -->
        </view>
      </template>
      <template v-else-if="passStep == 2">
        <view class="input_box">
          <input
            class="input"
            type="text"
            v-model="formData[passStep].phone"
            placeholder="请输入手机号"
          />
          <DeleteIcon
            v-show="formData[passStep].phone"
            @click="formData[passStep].phone = ''"
          ></DeleteIcon>
        </view>
        <view class="input_box">
          <input
            class="input"
            type="text"
            v-model="formData[passStep].code"
            placeholder="请输入验证码"
          />
          <SendCode></SendCode>
        </view>
      </template>

      <view class="submit_view">
        <up-button
          v-if="passStep == 1"
          :hairline="false"
          color="#eb5757"
          text="登录"
          shape="circle"
          class="submit_btn"
          form-type="submit"
          loadingText="登录中..."
          :loading="loginLoading"
          loadingSize="20"
        ></up-button>
        <up-button
          v-else-if="passStep == 2"
          :hairline="false"
          color="#eb5757"
          text="提交"
          shape="circle"
          class="submit_btn"
          form-type="submit"
          loadingText="提交中..."
          :loading="loginLoading"
          loadingSize="20"
        ></up-button>
      </view>
    </form>
    <view class="toggle" v-if="passStep == 1">
      <!-- <text class="text" @click="emits('toggle', 1)"> 手机号码登录 </text>
      <text class="or">|</text> -->
      <text class="text" @click="emits('toggle', 3)"> 新用户注册</text>
    </view>
    <u-toast ref="uToastRef"></u-toast>
  </view>
</template>

<script setup>
import { reactive, ref, toRaw } from "vue";
import { handleLogin } from "../../modules/api";
import SendCode from "../SendCode.vue";
import DeleteIcon from "../DeletcIcon.vue";

const uToastRef = ref(null);
const emits = defineEmits(["toggle"]);
const loginLoading = ref(false);

const passStep = ref(1); //步骤

const formData = reactive({
  1: {
    username: "",
    password: "",
  },
  2: {
    phone: "",
    code: "",
    qpassword: "",
  },
});

function onSubmit() {
  const keys = Object.keys(toRaw(formData)[passStep.value]);
  const pass = keys.every((key) => {
    if (!formData[passStep.value][key]) {
      return false;
    }
    return true;
  });

  if (!pass) {
    uToastRef.value?.show({
      message: "请按要求填写完整信息",
      position: "center",
    });
    return;
  }
  loginLoading.value = true;

  if (passStep.value == 1) {
    handleLogin(toRaw(formData)[passStep.value]).then((resp) => {
      if (resp && resp.code == 1) {
        uni.setStorageSync("token", resp.data.token);
        uni.switchTab({
          url: "/pages/home/index",
        });
        uToastRef.value?.show({
          type: "success",
          message: resp?.message,
          position: "center",
        });
        return;
      }
      loginLoading.value = false;
      uToastRef.value?.show({
        type: "error",
        message: resp?.message,
        position: "center",
      });
    });
  }
  if (passStep.value == 2) {
  }
}
</script>

<style lang="scss" scoped>
@import "../form.scss";
.user_login {
  .forget {
    font-size: 30rpx;
    color: #3c8eed;
  }
}
</style>
